import { 
    StatusBar,
    StyleSheet, 
    Text, 
    View ,
    Image,
    TextInput,
    TouchableHighlight,
    FlatList,
    ScrollView,
    TouchableOpacity,
    Pressable,
  } from 'react-native';
  import {useState,useEffect} from 'react';
  import axios from 'axios';
  
  const Btn=({onPress,children,style,textStyle})=>{
    return(
      <TouchableOpacity 
        onPress={onPress}
        style={[
          {
            backgroundColor:'#adf',
            width:60,
            height:30,
            alignItems:'center',
            justifyContent:'center',
            alignSelf:'center'
          },
          style
        ]}
      >
        <Text style={[{
          fontSize:20,
          color:'pink',
        },textStyle]}>
        {children}
        </Text>
      </TouchableOpacity>
    )
  }
  export default function App() {
    
    return (
      <ScrollView>
        <View style={{
          marginTop:100,
          
        }}>
          <View style={{
            flexDirection:'row'
          }}>
            <Btn 
              onPress={()=>{console.log('Btn Onpress')}} 
              textStyle={{color:'yellow'}}
              style={{
                width:100,
                borderRadius:4,
                borderRadius:20
              }}
            >
              全部
            </Btn>
            <Btn>
              精华
            </Btn>
          </View>
          <View>
            <Pressable style={({pressed})=>({
              backgroundColor:pressed?'yellow':'yellowgreen'
            })}>
              <Text>
                点击效果为按钮变色
              </Text>
            </Pressable>
            <Pressable 
            android_ripple={{
              color:'pink',
              
            }}
            style={{
              backgroundColor:'#fed',
              width:600,
              height:50
            }}
            >
              <Text>
                点击效果为波纹
              </Text>
            </Pressable>
          </View>
          <View>
            <FlatList
              renderItem={({item})=><Text>{item.title}</Text>}
              keyExtractor={item=>item.id}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
  
  
  const styles = StyleSheet.create({
    container:{
      backgroundColor:'#E1E1E1'
    },
  });
  
  
  
  